<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
	language="java"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<form id="form">
	<input type="hidden" id="id" name="id"
		value="<s:property value='soccerField.id'/>"> <input
		type="hidden" id="operation" name="operation"
		value='<s:property value="operation"/>'>
	<table id="ver-zebra">
		<colgroup>
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
		</colgroup>
		<tbody>
			<tr>
				<td></td>
				<td colspan="3"><font style="color: red;"><span
						id="error_message" class="error_message"></span></font></td>
			</tr>
			<tr>
				<td><label>Sân bóng: </label></td>
				<td colspan="3"><input id="name" type="text"
					required="required" name="name" /></td>
			</tr>

			<tr>
				<td><label>Hình ảnh: </label></td>
				<td><input type="hidden" name="image_url" id='image_url'
					value='<%=request.getContextPath() + "/FileUpload/default.jpg"%>'>
					<input type="button" value="Upload ảnh" onclick="showUploadForm();"></td>
				<td colspan="2"><img id="image"
					src="<%=request.getContextPath() + "/FileUpload/default.jpg"%>"
					style="max-height: 200px; max-width: 200px;" /></td>
			</tr>

			<tr>
				<td><label>Quận : </label></td>
				<td><select name="district" id="district">
						<option value="Ba Đình">Ba Đình</option>
						<option value="Tây Hồ">Tây Hồ</option>
						<option value="Hoàn Kiếm">Hoàn Kiếm</option>
						<option value="Cầu Giấy">Cầu Giấy</option>
						<option value="Đống Đa">Đống Đa</option>
						<option value="Long Biên">Long Biên</option>
						<option value="Hai Bà Trưng">Hai Bà Trưng</option>
						<option value="Hoàng Mai">Hoàng Mai</option>
						<option value="Thanh Xuân">Thanh Xuân</option>
						<option value="Hà Đông">Hà Đông</option>
						<option value="Bắc Từ Liêm">Bắc Từ Liêm</option>
						<option value="Nam Từ Liêm">Nam Từ Liêm</option>
				</select></td>
				<td><label>Địa chỉ: </label></td>
				<td><input id="address" type="text" required="required"
					name="address" /></td>
			</tr>
			<tr>
				<td><label>Mô tả</label></td>
				<td colspan="3"><textarea id="description" class="ckeditor"></textarea></td>
			</tr>
		</tbody>
	</table>
	<table name="subFieldName" id="ver-zebra">
		<colgroup>
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
		</colgroup>
		<tbody>
			<tr>
				<td><label>Sân con 1: </label></td>
				<td colspan="3"><input type="text" required="required"
					name="subSoccerField[0]" id="subSoccerField0" /> <input
					type="hidden" name="subSoccerFieldId[0]" /></td>
			</tr>
			<tr>
				<td><label>Khung giờ 1: </label></td>
				<td><select name="period1[0]" id="period1" required="required">
						<option value="7h-9h" selected="selected">7h-9h</option>
						<option value="9h-11h">9h-11h</option>
						<option value="13h-15h">13h-15h</option>
						<option value="15h-17h">15h-17h</option>
						<option value="17h-19h">17h-19h</option>
				</select></td>
				<td><label>Giá tiền (VNĐ): </label></td>
				<td><input id="price1" type="text" required="required"
					name="price1[0]" /></td>
			</tr>

			<tr>
				<td><label>Khung giờ 2: </label></td>
				<td><select name="period2[0]" id="period2" required="required">
						<option value="7h-9h">7h-9h</option>
						<option value="9h-11h" selected="selected">9h-11h</option>
						<option value="13h-15h">13h-15h</option>
						<option value="15h-17h">15h-17h</option>
						<option value="17h-19h">17h-19h</option>
				</select></td>
				<td><label>Giá tiền (VNĐ): </label></td>
				<td><input id="price2" type="text" required="required"
					name="price2[0]" /></td>
			</tr>

			<tr>
				<td><label>Khung giờ 3: </label></td>
				<td><select name="period3[0]" id="period3" required="required">
						<option value="7h-9h">7h-9h</option>
						<option value="9h-11h">9h-11h</option>
						<option value="13h-15h" selected="selected">13h-15h</option>
						<option value="15h-17h">15h-17h</option>
						<option value="17h-19h">17h-19h</option>
				</select></td>
				<td><label>Giá tiền (VNĐ): </label></td>
				<td><input id="price3" type="text" required="required"
					name="price3[0]" /></td>
			</tr>

			<tr>
				<td><label>Khung giờ 4: </label></td>
				<td><select name="period4[0]" id="period4" required="required">
						<option value="7h-9h">7h-9h</option>
						<option value="9h-11h">9h-11h</option>
						<option value="13h-15h">13h-15h</option>
						<option value="15h-17h" selected="selected">15h-17h</option>
						<option value="17h-19h">17h-19h</option>
				</select></td>
				<td><label>Giá tiền (VNĐ): </label></td>
				<td><input id="price4" type="text" required="required"
					name="price4[0]" /></td>
			</tr>

			<tr>
				<td><label>Khung giờ 5: </label></td>
				<td><select name="period5[0]" id="period5" required="required">
						<option value="7h-9h">7h-9h</option>
						<option value="9h-11h">9h-11h</option>
						<option value="13h-15h">13h-15h</option>
						<option value="15h-17h">15h-17h</option>
						<option value="17h-19h" selected="selected">17h-19h</option>
				</select></td>
				<td><label>Giá tiền (VNĐ): </label></td>
				<td><input id="price5" type="text" required="required"
					name="price5[0]" /></td>
			</tr>
		</tbody>
	</table>
	<input type="button" value="Thêm sân" onclick="addRow('subFieldName')" />
	<input type="button" value="Xóa sân"
		onclick="removeRow('subFieldName')" id="removeButt" />
	<table id="ver-zebra">
		<colgroup>
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
		</colgroup>
		<tbody>
			<tr>
				<td></td>
				<td colspan="3"><s:if test="operation == 'add'">
						<input type="submit" value="Lưu lại" />
					</s:if> <s:if test="operation == 'update'">
						<input type="submit" value="Cập nhật" />
						<input type="button" value="Xóa" onclick="confirmToDelete();" />
					</s:if></td>
			</tr>
		</tbody>
	</table>
</form>

<script type="text/javascript">
	$(document)
			.ready(
					function() {
						$('#removeButt').css('display', 'none');

						CKEDITOR.replace('description', {
							uiColor : '#21759B',
							language : 'vi'
						});

						saveSoccerField();
						for (var i = 1; i <= 5; i++) {
							$("#price" + i)
									.keydown(
											function(e) {
												// Allow: backspace, delete, tab, escape, enter and .110 dau .
												if ($.inArray(e.keyCode, [ 46,
														8, 9, 27, 13, 190 ]) !== -1
														||
														// Allow: Ctrl+A
														(e.keyCode == 65 && e.ctrlKey === true)
														||
														// Allow: home, end, left, right
														(e.keyCode >= 35 && e.keyCode <= 39)) {
													// let it happen, don't do anything
													return;
												}
												// Ensure that it is a number and stop the keypress
												if ((e.shiftKey || (e.keyCode<48 || e.keyCode>57))
														&& (e.keyCode<96 || e.keyCode>105)) {
													e.preventDefault();
												}
											});
						}
					});

	function saveSoccerField() {
		$('#form').validate({
			submitHandler : function(form) {
				var datastr = $("#form").serialize();
				var description = CKEDITOR.instances['description'].getData();
				datastr += "&description=" + description;
				if ($('#operation').val() == 'update' && $('#id').val() == '') {
					showAlertDialog($('#form'));
				} else {
					$.ajax({
						type : "POST",
						url : 'saveSoccerField',
						data : datastr,
						cache : false,
						dataType : 'text',
						beforeSend : function() {
							$.blockUI({
								css : {
									border : 'none',
									padding : '15px',
									backgroundColor : '#000',
									'-webkit-border-radius' : '10px',
									'-moz-border-radius' : '10px',
									opacity : .5,
									color : '#fff'
								}
							});
						},
						complete : function() {
							$.unblockUI();
						},
						success : function(html) {
							goBack();
						},
						error : function(err) {
							$('#error_message').html("Thêm mới thất bại");
							$('#error_message').css("display", "block");
						}
					});
				}
			}
		});
	};

	function deleteSoccerField() {
		var id = $('#id').val();
		var datastr = 'id=' + id;
		$.ajax({
			type : "POST",
			url : "deleteSoccerField",
			data : datastr,
			cache : false,
			dataType : 'text',
			beforeSend : function() {
				$.blockUI({
					css : {
						border : 'none',
						padding : '15px',
						backgroundColor : '#000',
						'-webkit-border-radius' : '10px',
						'-moz-border-radius' : '10px',
						opacity : .5,
						color : '#fff'
					}
				});
			},
			complete : function() {
				$.unblockUI();
			},
			success : function(html) {
				goBack();
			},
			error : function(err) {
				$('#error_message').html("Không thể xóa vì đang được sử dụng");
				$('#error_message').css("display", "block");
			}
		});
	}

	function resetForm() {
		$('input[name="select"]').attr('checked', false);
		$('#error_message').css("display", "none");
		$('#id').val(null);
		$('#form').validate().resetForm();
		return false;
	}

	function confirmToDelete() {
		var id = $('#id').val();
		if (id == null || id == "") {
			showAlertDialog('#form');
		} else {
			// Define the Dialog and its properties.
			showConfirmDialog('#form');
		}

		return false;
	}

	function callback(value) {
		if (value) {
			deleteSoccerField();
		}
	}

	function goBack() {
		var url = 'listSoccerField';
		window.location.href = url;
	}

	function setSoccerField(id, name, image, address, district) {
		$('#id').val(id);
		$('#name').val(name);
		$('#image_url').val(image);
		$('#address').val(address);
		$('#district').val(district);
	}

	function showUploadForm() {
		var returnedValue = window.showModalDialog("displayFormUpload",
				"Upload form",
				"dialogWidth:500px;dialogHeight:500px;resizable:off;center:on");

		$('#image_url').val(returnedValue);
		$('#image').attr('src', returnedValue);
	}

	var numberArg = 0;
	function addRow(tableID) {
		numberArg++;
		var table = document.getElementsByName(tableID).item(0);

		var rowCount = table.rows.length;
		var row = table.insertRow(rowCount);

		var cell1 = row.insertCell(0);
		var subField = document.createElement("label");
		subField.innerHTML = "Sân con " + (numberArg + 1) + ":";
		cell1.appendChild(subField);

		var cell2 = row.insertCell(1);
		cell2.colSpan = "3";
		var subFieldName = document.createElement("input");
		subFieldName.type = "text";
		subFieldName.required = "required";
		subFieldName.name = "subSoccerField[" + numberArg + "]";
		subFieldName.id = "subSoccerField" + numberArg;
		cell2.appendChild(subFieldName);
		
		var subFieldName = document.createElement("input");
		subFieldName.type = "hidden";
		subFieldName.name = "subSoccerFieldId[" + numberArg + "]";
		cell2.appendChild(subFieldName);

		// new row
		rowCount++;
		var row = table.insertRow(rowCount);

		var cell1 = row.insertCell(0);
		var lable = document.createElement("label");
		lable.innerHTML = "Khung giờ 1:";
		cell1.appendChild(lable);

		var cell2 = row.insertCell(1);
		var select = document.createElement("select");
		var option1 = document.createElement("option");
		var option2 = document.createElement("option");
		var option3 = document.createElement("option");
		var option4 = document.createElement("option");
		var option5 = document.createElement("option");
		select.name = "period1[" + numberArg + "]";
		option1.selected = "selected";
		option1.value = "7h-9h";
		option1.innerHTML = "7h-9h";
		option2.value = "9h-11h";
		option2.innerHTML = "9h-11h";
		option3.value = "13h-15h";
		option3.innerHTML = "13h-15h";
		option4.value = "15h-17h";
		option4.innerHTML = "15h-17h";
		option5.value = "17h-19h";
		option5.innerHTML = "17h-19h";

		select.appendChild(option1);
		select.appendChild(option2);
		select.appendChild(option3);
		select.appendChild(option4);
		select.appendChild(option5);
		cell2.appendChild(select);

		var cell1 = row.insertCell(2);
		var lable = document.createElement("label");
		lable.innerHTML = "Giá tiền (VNĐ):";
		cell1.appendChild(lable);

		var cell2 = row.insertCell(3);
		var input = document.createElement("input");
		input.type = "text";
		input.required = "required";
		input.name = "price1[" + numberArg + "]";
		cell2.appendChild(input);

		// new row
		rowCount++;
		var row = table.insertRow(rowCount);

		var cell1 = row.insertCell(0);
		var lable = document.createElement("label");
		lable.innerHTML = "Khung giờ 2:";
		cell1.appendChild(lable);

		var cell2 = row.insertCell(1);
		var select = document.createElement("select");
		var option1 = document.createElement("option");
		var option2 = document.createElement("option");
		var option3 = document.createElement("option");
		var option4 = document.createElement("option");
		var option5 = document.createElement("option");
		select.name = "period2[" + numberArg + "]";
		option2.selected = "selected";
		option1.value = "7h-9h";
		option1.innerHTML = "7h-9h";
		option2.value = "9h-11h";
		option2.innerHTML = "9h-11h";
		option3.value = "13h-15h";
		option3.innerHTML = "13h-15h";
		option4.value = "15h-17h";
		option4.innerHTML = "15h-17h";
		option5.value = "17h-19h";
		option5.innerHTML = "17h-19h";

		select.appendChild(option1);
		select.appendChild(option2);
		select.appendChild(option3);
		select.appendChild(option4);
		select.appendChild(option5);
		cell2.appendChild(select);

		var cell1 = row.insertCell(2);
		var lable = document.createElement("label");
		lable.innerHTML = "Giá tiền (VNĐ):";
		cell1.appendChild(lable);

		var cell2 = row.insertCell(3);
		var input = document.createElement("input");
		input.type = "text";
		input.required = "required";
		input.name = "price2[" + numberArg + "]";
		cell2.appendChild(input);

		// new row
		rowCount++;
		var row = table.insertRow(rowCount);

		var cell1 = row.insertCell(0);
		var lable = document.createElement("label");
		lable.innerHTML = "Khung giờ 3:";
		cell1.appendChild(lable);

		var cell2 = row.insertCell(1);
		var select = document.createElement("select");
		var option1 = document.createElement("option");
		var option2 = document.createElement("option");
		var option3 = document.createElement("option");
		var option4 = document.createElement("option");
		var option5 = document.createElement("option");
		select.name = "period3[" + numberArg + "]";
		option3.selected = "selected";
		option1.value = "7h-9h";
		option1.innerHTML = "7h-9h";
		option2.value = "9h-11h";
		option2.innerHTML = "9h-11h";
		option3.value = "13h-15h";
		option3.innerHTML = "13h-15h";
		option4.value = "15h-17h";
		option4.innerHTML = "15h-17h";
		option5.value = "17h-19h";
		option5.innerHTML = "17h-19h";

		select.appendChild(option1);
		select.appendChild(option2);
		select.appendChild(option3);
		select.appendChild(option4);
		select.appendChild(option5);
		cell2.appendChild(select);

		var cell1 = row.insertCell(2);
		var lable = document.createElement("label");
		lable.innerHTML = "Giá tiền (VNĐ):";
		cell1.appendChild(lable);

		var cell2 = row.insertCell(3);
		var input = document.createElement("input");
		input.type = "text";
		input.required = "required";
		input.name = "price3[" + numberArg + "]";
		cell2.appendChild(input);

		// new row
		rowCount++;
		var row = table.insertRow(rowCount);

		var cell1 = row.insertCell(0);
		var lable = document.createElement("label");
		lable.innerHTML = "Khung giờ 4:";
		cell1.appendChild(lable);

		var cell2 = row.insertCell(1);
		var select = document.createElement("select");
		var option1 = document.createElement("option");
		var option2 = document.createElement("option");
		var option3 = document.createElement("option");
		var option4 = document.createElement("option");
		var option5 = document.createElement("option");
		select.name = "period4[" + numberArg + "]";
		option4.selected = "selected";
		option1.value = "7h-9h";
		option1.innerHTML = "7h-9h";
		option2.value = "9h-11h";
		option2.innerHTML = "9h-11h";
		option3.value = "13h-15h";
		option3.innerHTML = "13h-15h";
		option4.value = "15h-17h";
		option4.innerHTML = "15h-17h";
		option5.value = "17h-19h";
		option5.innerHTML = "17h-19h";

		select.appendChild(option1);
		select.appendChild(option2);
		select.appendChild(option3);
		select.appendChild(option4);
		select.appendChild(option5);
		cell2.appendChild(select);

		var cell1 = row.insertCell(2);
		var lable = document.createElement("label");
		lable.innerHTML = "Giá tiền (VNĐ):";
		cell1.appendChild(lable);

		var cell2 = row.insertCell(3);
		var input = document.createElement("input");
		input.type = "text";
		input.required = "required";
		input.name = "price4[" + numberArg + "]";
		cell2.appendChild(input);

		// new row
		rowCount++;
		var row = table.insertRow(rowCount);

		var cell1 = row.insertCell(0);
		var lable = document.createElement("label");
		lable.innerHTML = "Khung giờ 5:";
		cell1.appendChild(lable);

		var cell2 = row.insertCell(1);
		var select = document.createElement("select");
		var option1 = document.createElement("option");
		var option2 = document.createElement("option");
		var option3 = document.createElement("option");
		var option4 = document.createElement("option");
		var option5 = document.createElement("option");
		select.name = "period5[" + numberArg + "]";
		option5.selected = "selected";
		option1.value = "7h-9h";
		option1.innerHTML = "7h-9h";
		option2.value = "9h-11h";
		option2.innerHTML = "9h-11h";
		option3.value = "13h-15h";
		option3.innerHTML = "13h-15h";
		option4.value = "15h-17h";
		option4.innerHTML = "15h-17h";
		option5.value = "17h-19h";
		option5.innerHTML = "17h-19h";

		select.appendChild(option1);
		select.appendChild(option2);
		select.appendChild(option3);
		select.appendChild(option4);
		select.appendChild(option5);
		cell2.appendChild(select);

		var cell1 = row.insertCell(2);
		var lable = document.createElement("label");
		lable.innerHTML = "Giá tiền (VNĐ):";
		cell1.appendChild(lable);

		var cell2 = row.insertCell(3);
		var input = document.createElement("input");
		input.type = "text";
		input.required = "required";
		input.name = "price5[" + numberArg + "]";
		cell2.appendChild(input);

		//display remove button
		$('#removeButt').css('display', '');
		$('#subSoccerField' + numberArg).focus();
	}

	function removeRow(tableID) {
		numberArg--;
		var table = document.getElementsByName(tableID).item(0);

		var rowCount = table.rows.length;

		for (var i = rowCount - 1; i >= rowCount - 6; i--) {
			table.deleteRow(i);
		}

		if (numberArg == 0) {
			$('#removeButt').css('display', 'none');
		}

		$('#subSoccerField' + numberArg).focus();
	}
</script>
